<template>
  <a-tooltip placement="topLeft">
    <template slot="title">
      <span>{{stateData}}</span>
    </template>
    {{stateData?(stateData.length>length?stateData.substr(0, length)+'...': stateData):''}}
  </a-tooltip>
</template>

<script>
  export default {
    name: 'AkEllipsisHtml',
    props: {
      value: {
        type: String,
        required: false,
        default:''
      },
      length: {
        type: Number,
        required: false,
        default: 25,
      }
    },
    data(){
      return {
        stateData:'',
      }
    },
    mounted(){
      this.stateData = this.transfer(this.value);
    },
    methods:{
      transfer(val){
        if(val){
          let div = document.createElement('div');
          div.innerHTML=val;
          return div.textContent;
        }
        return "";

      }
    },
    watch:{
      value: function (val) {
        this.stateData = this.transfer(val);
      }
    }
  }
</script>

<style scoped>

</style>